/*
 * @Author: xiaosihan 
 * @Date: 2024-07-23 21:23:43 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-09-22 23:07:12
 */

import hashHistory from "@hashHistory";
import userStore from "@views/userStore";
import { Button, Empty } from "antd";
import clsx from "clsx";
import { isEmpty } from "lodash";
import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import PCHeader from "../PCHeader/PCHeader";
import orderPNG from "./order.png";
import pathPNG from "./path.png";
import requestPNG from "./request.png";
import styles from "./userCenter.module.less";
import projectCollaborationStore from "../ProjectCollaboration/projectCollaborationStore";
import { PartData } from "@type";

interface Iprops {
    children?: ReactNode
}

// 个人中心
export default function UserCenter() {

    const dom = useRef<HTMLDivElement | null>(null);
    const [list, setList] = useState(projectCollaborationStore.list);
    const [userName, setUserName] = useState(userStore.name);

    useEffect(() => {
        projectCollaborationStore.getList(1, 4);
    }, []);

    useEffect(() => autorun(() => {
        setList(projectCollaborationStore.list);
        setUserName(userStore.name);
    }), []);

    return (
        <div className={styles.userCenter} >
            <PCHeader />
            <div className={styles.title} >您好，{userName}</div>
            <div className={styles.subTitle} >在这里，你会更便捷的管理您的项目和生产。</div>

            <div className={styles.space} >
                <span className={styles.my_space} >免费版</span>
                <div className={styles.progress_bg} >
                    <div className={styles.progress}>
                    </div>
                    <div className={styles.text} >7个模型</div>
                </div>
                &nbsp;
                &nbsp;
                &nbsp;
                <Button
                    type="primary"
                >升级空间</Button>
                &nbsp;
                &nbsp;
                &nbsp;
                <Button
                    type="primary"
                    onClick={() => {
                        hashHistory.push("/partsLibrary");
                    }}
                >所有文件</Button>
            </div>

            <div className={styles.tip} >免费版用户仅有8个模型的使用空间,且部分功能受限,如有需要,请务必升级。</div>

            <div className={styles.spit} ></div>

            <div className={styles.productor_div} >
                <span className={styles.productor} >产品及服务</span>
            </div>

            <div className={styles.services} >

                <div className={styles.service} >
                    <div className={styles.head} >
                        <img className={styles.icon} src={pathPNG} alt="" />
                        项目管理
                    </div>

                    <span
                        className={styles.all_btn}
                        onClick={() => {
                            hashHistory.push("/projectCollaboration");
                            projectCollaborationStore.setIsAdd(false);
                        }}
                    >查看所有</span>

                    <div className={clsx(styles.list, isEmpty(list) && styles.empty)} >
                        {
                            list.slice(0, 4).map((part: any, i: number) => {
                                return (
                                    <div className={styles.list_item} key={i} >
                                        <img className={styles.icon} src={pathPNG} alt="" />
                                        <div className={styles.name} >{part.name}</div>
                                    </div>
                                );
                            })
                        }
                        {
                            isEmpty(list) &&
                            <Empty
                                className={styles.empty}
                                image="./notFind.png"
                                description="暂无项目管理"
                            />
                        }
                    </div>

                    <div className={styles.footer} >
                        <Button
                            type="primary"
                            onClick={() => {
                                hashHistory.push("/projectCollaboration");
                                projectCollaborationStore.setIsAdd(true);
                            }}
                        >创建项目</Button>
                    </div>

                </div>

                <div className={styles.service} >
                    <div className={styles.head} >
                        <img
                            alt=""
                            src={requestPNG}
                            className={styles.icon}
                        />
                        报价请求
                    </div>

                    <span
                        className={styles.all_btn}
                        onClick={() => { }}
                    >查看所有</span>

                    <div className={clsx(styles.list, styles.empty)} >
                        <Empty
                            className={styles.empty}
                            image="./notFind.png"
                            description="文件夹为空"
                        />
                    </div>

                    <div className={styles.footer} >
                        <Button
                            type="primary"
                            onClick={() => hashHistory.push("/updataModel")}
                        >上传部件获取报价</Button>
                    </div>
                </div>

                <div className={styles.service} >
                    <div className={styles.head} >
                        <img className={styles.icon} src={orderPNG} alt="" />
                        我的订单
                    </div>

                    <span
                        className={styles.all_btn}
                        onClick={() => { }}
                    >查看所有</span>

                    <div className={clsx(styles.list, styles.empty)} >
                        <Empty
                            className={styles.empty}
                            image="./notFind.png"
                            description="文件夹为空"
                        />
                    </div>

                    <div className={styles.footer} >
                        <Button
                            type="primary"
                            onClick={() => hashHistory.push("/updataModel")}
                        >去定制</Button>
                    </div>
                </div>

            </div>

        </div>
    );

}